﻿<div class="col-lg-6">
        <div class="panel panel-default">
                <div class="panel-body" style = "background: #CEE3F6">
                        <div class="form-group col-xs-6" style="margin-left:50%">
                                </br><label style="color: rgb(224, 73, 1);"><span class="glyphicon glyphicon-asterisk" id="icon"/>&nbsp;Campos obligatorios</label>
                        </div>
                        
                        <div class="col-xs-12"><h2>Nuevo<b id="resaltador"> &nbsp;Rol</b></h2><br/></div>
                        <div class="col-xs-12">
                                <form id ="myForm" role="form" action="insertar_registro.php" onsubmit="return validar()" method="post">
                                        <div class="form-group col-xs-4" id="ci">
                                                <label><span class="glyphicon glyphicon-asterisk" id="icon"/> Cédula&nbsp;</label>
                                                <input type="text" maxlength="8" class="form-control" name="ci" required>
                                        </div>
                                        <div class="form-group col-xs-8">
                                                <label><span class="glyphicon glyphicon-asterisk" id="icon"/> Nombre&nbsp;</label>
                                                <select class="form-control" id="tipoRol" name ="tipoRol" required>
                                                        <option></option>
                                                        <option>Coordinador de Centro</option>
                                                        <option>Coordinador de Materia</option>
                                                        <option>Jefe de Departamento</option>
                                                </select>
                                        </div>
                                        <div class="col-xs-12"><label><span class="glyphicon glyphicon-asterisk" id="icon"/> Fecha Inicio&nbsp;</label></div>
                                        <div class="form-group col-xs-3" id="fecha_inicio_dia">
                                                <input type="number" class="form-control" min="1" max="31" name="fecha_inicio_dia" placeholder="Día" required>
                                        </div>
                                        <div class="form-group col-xs-6" id="fecha_inicio_mes">
                                                <select class="form-control" name ="fecha_inicio_mes" value="Mes" required>
                                                        <option value="" disabled selected style="display:none;">Mes</option>
                                                        <option value="1">Enero</option>
                                                        <option value="2">Febrero</option>
                                                        <option value="3">Marzo</option>
                                                        <option value="4">Abril</option>
                                                        <option value="5">Mayo</option>
                                                        <option value="6">Junio</option>
                                                        <option value="7">Julio</option>
                                                        <option value="8">Agosto</option>
                                                        <option value="9">Septiembre</option>
                                                        <option value="10">Octubre</option>
                                                        <option value="11">Noviembre</option>
                                                        <option value="12">Diciembre</option>
                                                </select>
                                        </div>
                                        <div class="form-group col-xs-3" id="fecha_inicio_año">
                                                <input type="number" class="form-control" min="2000" max="2100" name="fecha_inicio_año" placeholder="Año" required>
                                        </div>
                                        <div class="col-xs-12"><label>Fecha Fin</label></div>
                                        <div class="form-group col-xs-3" id="fecha_fin_dia">
                                                <input type="number" class="form-control" min="1" max="31" name="fecha_fin_dia" placeholder="Día">
                                        </div>
                                        <div class="form-group col-xs-6" id="fecha_fin_mes">
                                                <select class="form-control" name ="fecha_fin_mes" value="Mes">
                                                        <option value="" disabled selected style="display:none;">Mes</option>
                                                        <option value="1">Enero</option>
                                                        <option value="2">Febrero</option>
                                                        <option value="3">Marzo</option>
                                                        <option value="4">Abril</option>
                                                        <option value="5">Mayo</option>
                                                        <option value="6">Junio</option>
                                                        <option value="7">Julio</option>
                                                        <option value="8">Agosto</option>
                                                        <option value="9">Septiembre</option>
                                                        <option value="10">Octubre</option>
                                                        <option value="11">Noviembre</option>
                                                        <option value="12">Diciembre</option>
                                                </select>
                                        </div>
                                        <div class="form-group col-xs-3" id="fecha_fin_año">
                                                <input type="number" class="form-control" min="2000" max="2100" name="fecha_fin_año" placeholder="Año">
                                        </div>
                                        <div class="col-xs-12"></br></div>
                                        <div class="col-xs-4"></div>
                                        <div class="col-xs-4">  
                                                <button type="submit" id="letra_boton" class="btn btn-primary form-control">Agregar</button>
                                        </div>
                                        <div class="col-xs-4"></div>
                                        <div class="col-xs-12"></br></div>
                                        <input type="hidden" name="tabla" value="rol">
                                </form>
                        </div> 
                </div>
        </div>
</div>

<!-- Seccion para mostrar los datos del profesor especificado por la cedula, si existe -->
<div class="col-lg-4">
    <div class="panel panel-default">
        <div id = "requerido" class="panel-body" style = "background: #CEE3F6">
                <!-- Aqui se cargaran los datos del profesor especificado -->
        </div>
    </div>
</div>

<script>

    function carga(p1, p2, p3)
    {
            var xxx = {
                    dato: p1,
                    tabla: p2,
                    campo: p3
            };
        $.ajax({type:"POST",url:"completar_rol.php",data: xxx, success:function(result){$("#requerido").html(result);}});
    }

$('[name=ci]').keyup(function (e) 
{
        var code = $(this).val(); 
        if(/^[0-9]+$/.test(code)){
                $.post('validaciones.php', {'ci':code}, function(data) 
                {
                        if(data=='NO')
                        {
                        	$("#ci").addClass("has-error");
                        	$("#ci").removeClass("has-success");
                        }
                        else 
                        {
                        	$("#ci").removeClass("has-error");
                        	$("#ci").addClass("has-success");
                        }

                        carga($('[name=ci]').val(), 'persona', 'ci');
                });
        }
        else $("#cedula").addClass("has-error");
});

function validar_fecha_inicio()
{
        var fecha_inicio = true;
        var dia_inicio = $('[name=fecha_inicio_dia]').val();
        var mes_inicio = $('[name=fecha_inicio_mes]').val();
        var año_inicio = $('[name=fecha_inicio_año]').val();

        if(dia_inicio > 31 || dia_inicio < 1 || año_inicio < 1900) {fecha_inicio = false;}
        if(mes_inicio == 2 && año_inicio%4 == 0 && dia_inicio > 29){fecha_inicio = false;}
        if(mes_inicio == 2 && año_inicio%4 != 0 && dia_inicio > 28){fecha_inicio = false;}
        if(mes_inicio == 4 || mes_inicio == 6 || mes_inicio == 9 || mes_inicio == 11){if(dia_inicio > 30) fecha_inicio = false;}

        return fecha_inicio;
}

function validar_fecha_fin()
{
        var fecha_fin = true;
        var dia_fin = $('[name=fecha_fin_dia]').val();
        var mes_fin = $('[name=fecha_fin_mes]').val();
        var año_fin = $('[name=fecha_fin_año]').val();

        if(dia_fin > 31 || dia_fin < 1 || año_fin < 1900) {fecha_fin = false;}
        if(mes_fin == 2 && año_fin%4 == 0 && dia_fin > 29){fecha_fin = false;}
        if(mes_fin == 2 && año_fin%4 != 0 && dia_fin > 28){fecha_fin = false;}
        if(mes_fin == 4 || mes_fin == 6 || mes_fin == 9 || mes_fin == 11){if(dia_fin > 30) fecha_fin = false;}

        return fecha_fin;
}

function fecha_inicio_invalida()
{
        $("#fecha_inicio_dia").addClass("has-error");
        $("#fecha_inicio_mes").addClass("has-error");
        $("#fecha_inicio_año").addClass("has-error");
}

function fecha_inicio_valida()
{
        $("#fecha_inicio_dia").removeClass("has-error");
        $("#fecha_inicio_mes").removeClass("has-error");
        $("#fecha_inicio_año").removeClass("has-error");
}

function fecha_fin_invalida()
{
        $("#fecha_fin_dia").addClass("has-error");
        $("#fecha_fin_mes").addClass("has-error");
        $("#fecha_fin_año").addClass("has-error");
}

function fecha_fin_valida()
{
        $("#fecha_fin_dia").removeClass("has-error");
        $("#fecha_fin_mes").removeClass("has-error");
        $("#fecha_fin_año").removeClass("has-error");
}

$('[name=fecha_inicio_dia]').change(function(){if(validar_fecha_inicio()) fecha_inicio_valida();else fecha_inicio_invalida()});
$('[name=fecha_inicio_mes]').change(function(){if(validar_fecha_inicio()) fecha_inicio_valida();else fecha_inicio_invalida()});
$('[name=fecha_inicio_año]').change(function(){if(validar_fecha_inicio()) fecha_inicio_valida();else fecha_inicio_invalida()});
$('[name=fecha_fin_dia]').change(function(){if(validar_fecha_fin()) fecha_fin_valida();else fecha_fin_invalida()});
$('[name=fecha_fin_mes]').change(function(){if(validar_fecha_fin()) fecha_fin_valida();else fecha_fin_invalida()});
$('[name=fecha_fin_año]').change(function(){if(validar_fecha_fin()) fecha_fin_valida();else fecha_fin_invalida()});

function validar()
{
        var cedula_valida = true;
        var fecha_inicio = true;
        var fecha_fin = true;
        var fechas_correctas = true;
        var dia_inicio = $('[name=fecha_inicio_dia]').val();
        var mes_inicio = $('[name=fecha_inicio_mes]').val();
        var año_inicio = $('[name=fecha_inicio_año]').val();
        var dia_fin = $('[name=fecha_fin_dia]').val();
        var mes_fin = $('[name=fecha_fin_mes]').val();
        var año_fin = $('[name=fecha_fin_año]').val();

        if($("#cedula").hasClass("has-error")) cedula_valida = false;

        if(dia_inicio > 31 || dia_inicio < 1 || año_inicio < 1900) {fecha_inicio = false;}
        if(dia_fin != 0 && mes_fin != 0 && año_fin !=0)if(dia_fin > 31 || dia_fin < 1 || año_fin < 1900) {fecha_fin = false;}
        if(mes_inicio == 2 && año_inicio%4 == 0 && dia_inicio > 29){fecha_inicio = false;}
        if(mes_inicio == 2 && año_inicio%4 != 0 && dia_inicio > 28){fecha_inicio = false;}
        if(mes_fin == 2 && año_fin%4 == 0 && dia_fin > 29){fecha_fin = false;}
        if(mes_fin == 2 && año_fin%4 != 0 && dia_fin > 28){fecha_fin = false;}
        if(mes_inicio == 4 || mes_inicio == 6 || mes_inicio == 9 || mes_inicio == 11){if(dia_inicio > 30) fecha_inicio = false;}
        if(mes_fin == 4 || mes_fin == 6 || mes_fin == 9 || mes_fin == 11){if(dia_fin > 30) fecha_fin = false;}

        if(año_fin > 0 && año_inicio > año_fin) fechas_correctas = false; 
        if ( año_fin >0 && mes_fin > 0 && año_inicio == año_fin && mes_inicio >= mes_fin) fechas_correctas = false;

        if(!fecha_fin || !fecha_inicio || !cedula_valida || !fechas_correctas)alert("Uno o más campos inválidos!\nVerífiquelos antes de continuar.");
        return (fecha_fin && fecha_inicio && cedula_valida && fechas_correctas);
}

$("#agregar").click(function(){return confirm("¿Está seguro que desea continuar?")});
</script>